<template>
  <view class="content flex-center flex-col">
    <map id="mapId" class="map" style="width: 100%;height: calc(100vh - 300rpx);" @markertap="onMarkerTap"
      :latitude="latitude" :longitude="longitude" scale="10" :markers="newMarkers"></map>
    <!-- 警情统计 -->
  </view>
</template>

<script setup lang='ts'>
import { ref, onMounted } from "vue";

const props = defineProps({
  titleName: {
    type: String,
  },
  operation: {
    type: String,
    default: "small"
  },
  newMarkers: {
    type: Array,
  }
})

const latitude: number = 32.0415;
const longitude: number = 118.784321;


const jqId = ref<string>('地图图标上传入的警情id22222')
let mapCtx = null;

onMounted(() => {
  mapCtx = wx.createMapContext("mapId");
});

function onMarkerTap(event: any) {
  let newMark: any = props.newMarkers && props.newMarkers.find((item: any) => {
    return item.id == event.detail.markerId
  }) || null
  // 将当前警情的 经纬度坐标传递给警情详情页面
  uni.navigateTo({
    url: "/pages/alarm-overview/index?jqId=" + newMark?.jqId + '&latitude=' + newMark?.latitude + '&longitude=' + newMark?.longitude,
  });
}


</script>

<style lang='less' module>
.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}
</style>
